{%- liquid
  case section.settings.background_color
    when 'white'
      assign color_style = 'light'
    when 'black'
      assign color_style = 'dark'
    else
      assign color_style = 'default'
  endcase
-%}

<div class="site-footer-v2 {{ color_style }}">
  {% if section.settings.show_email_signup %}
    <div class="form-wrapper">
      <div class="container">
        <div class="row py-5">
          {% if section.settings.heading != blank or section.settings.description != blank %}
            <div class="col-12 col-lg-4 offset-lg-2">
              {% if section.settings.heading != blank %}
                <h2 class="lead fw-bold mb-0">
                  {{ section.settings.heading }}
                </h2>
              {% endif %}
              {% if section.settings.description != blank %}
                <div class="small text-footer no-last-margin mt-1">
                  {{ section.settings.description }}
                </div>
              {% endif %}
            </div>
          {% endif %}
          {%- assign formId = 'Contact_' | append: "footer" -%}
            <div class="col-12 col-lg-6 ps-lg-8">
              <div class="subscribe-width mt-3 mt-lg-0">
                {% assign api = settings.subscribe_api %}
                {% form 'customer', id: 'footer-contact_form', class: 'as-validate-form as-newsletter-footer', data-action: api, novalidate: 'novalidate', autocomplete: "off" %}
                  <div class="form-pristine">
                    <div class="input-group input-group-sm input-pristine">
                      <input class="form-control form-control-sm rounded-start"
                        type="email" {% if api != blank %} name="email" {% else %} name="contact[email]"  {% endif %} id="{{ formId }}-email"
                        data-pristine-required-message="{{ 'general.subscribe.email_error_message' | t }}"
                        data-pristine-email-message="{{ 'general.subscribe.email_error_message' | t }}"
                        value="{{ form.email }}" placeholder="{{ 'general.subscribe.placeholder' | t }}"
                        aria-describedby="footer-subscribe-button" required>
                      <button class="btn-primary px-2 border-0 ms-0 rounded-end fs-footnote fw-bolder" id="footer-subscribe-button" type="submit" aria-label="submit">{{ 'general.subscribe.submit' | t  }}</button>
                    </div>
                  </div>
                  {% if settings.enable_gdpr_policy_checkbox %}
                    <div class="mt-3 form-pristine position-relative">
                      <div class="form-check input-pristine ">
                        <input type="checkbox" data-pristine-required-message="{{ 'general.subscribe.policy_error_message' | t }}" id="privacy_policy" name="privacy_policy" value="privacy_policy" class="form-check-input text-footer" required>
                        <label for="privacy_policy" class="form-check-label fs-footnote text-footer richtext-with-link {{ color_style }}">{{ 'general.subscribe.accept_policy_html' | t }}</label><br>
                      </div>
                    </div>
                  {% endif %}
                  <div class="text-success as-success-tips d-none mt-1">{{ 'general.subscribe.success_message' | t }}</div>
                  <div class="text-danger as-error-tips d-none mt-1">{{ 'general.subscribe.error_message' | t }}</div>
                {% endform %}
              </div>
            </div>
        </div>
      </div>
    </div>
  {% endif %}
  <div class="container py-md-7 py-6">
    <div class="d-lg-flex justify-content-between">
      <div class="col">
        <div class="row row-cols-2 row-cols-lg-4 align-content-start gy-4 gx-md-3 gy-md-5 gx-lg-4">
          {% if section.settings.footer_menu != blank %}
            {% assign mainMenu = linklists[section.settings.footer_menu].links %}
            {% if mainMenu.size > 0 %}
              {% for menu in mainMenu %}
                <div class="col">
                  {% assign submenu = menu.links %}
                  <h6 class="small fw-bold mb-0">{{ menu.title }}</h6>
                  {% if submenu.size > 0 %}
                    <div class="small">
                      <ul class="list-unstyled pt-2 mb-0">
                        {% for link in submenu %}
                          <li class="{% if forloop.last == true %}mt-2{% else %}my-2{% endif %}"><a {% if link.url contains 'https://' %}
                            target="_blank" rel="nofollow" {% endif %} class="fw-normal text-decoration-none link-footer {{ color_style }}" href="{{ link.url }}">{{ link.title }}</a></li>
                        {% endfor %}
                      </ul>
                    </div>
                  {% endif %}
                </div>
              {% endfor %}
            {% endif %}
          {% endif %}
        </div>
      </div>
      <div class="mt-4 mt-md-5 mt-lg-0 ms-lg-8">
        {% if section.settings.social_media_heading != blank %}
          <h6 class="small mb-0">{{ section.settings.social_media_heading }}</h6>
        {% endif %}
        {% if section.settings.show_social_media_icons %}
          {%- liquid
            assign social_media_string = 'twitter,facebook,instagram,pinterest,snapchat,youtube,vimeo,tumblr,tiktok'
            assign social_media = social_media_string | split: ','
            assign show_media = false
            for media in social_media
              assign social_link = media | append: '_link' | prepend: 'social_'
              if settings[social_link] != blank
                assign show_media = true
                break
              endif
            endfor
          -%}
          {% if show_media %}
            <div class="mt-3">
              <div class="row g-2">
                {% for media in social_media %}
                  {% assign social_link=media | append: '_link' | prepend: 'social_' %}
                  {% if settings[social_link] != blank %}
                    <div class="col-auto">
                      <a {% render 'link', link: settings[social_link] %} class="link-footer {{ color_style }} text-decoration-none icon-wrap-md" href="{{ settings[social_link] }}">
                        {% render 'icon-social-media', media: media %}
                      </a>
                    </div>
                  {% endif %}
                {% endfor %}
              </div>
            </div>
          {% endif %}
        {% endif %}
        {% if section.settings.phone_number != blank or section.settings.email_address != blank %}
          <div class="small mt-4 ">
            {% if section.settings.phone_number != blank %}
              <a href="tel:{{ section.settings.phone_number }}" class="text-decoration-none fw-normal d-block link-footer {{ color_style }} {% if section.settings.email_address != blank %}mb-3{% endif %}">
                <span class="pe-2">{% render 'icon-telephone' %}</span>
                {{ section.settings.phone_number }}
              </a>
            {% endif %}
            {% if section.settings.email_address != blank %}
              <a href="mailto:{{ section.settings.email_address }}" class="text-decoration-none fw-normal d-block link-footer {{ color_style }}">
                <span class="pe-2">{% render 'icon-email' %}</span>
                {{ section.settings.email_address }}
              </a>
            {% endif %}
          </div>
        {% endif %}
        {% if section.settings.app_download_heading != blank %}
          <h6 class="small mt-3 mt-md-4 mb-0">
            {{ section.settings.app_download_heading }}
          </h6>
        {%- endif -%}
        {%- if section.settings.google_download_link != nil or section.settings.apple_store_link != nil -%}
          <div class="d-flex ms-n2 mt-3 ">
            {%- if section.settings.google_download_link != nil -%}
              <a class="ms-2" href="{{ section.settings.google_download_link }}" {% render 'link', link: section.settings.google_download_link %}>
                <img src="{{ 'download-google-play.png' | asset_img_url: '135x' }}"
                  srcset="{{ 'download-google-play.png' | asset_img_url: '135x' }} 1x, {{ 'download-google-play.png' | asset_img_url: '270x' }} 2x"
                  loading="lazy"
                  alt="Get it on Google Play"
                  width="135"
                  height="41">
              </a>
            {%- endif -%}
            {%- if section.settings.apple_store_link != nil -%}
              <a class="ms-2" href="{{ section.settings.apple_store_link }}" {% render 'link', link: section.settings.apple_store_link %}>
                <img src="{{ 'download-app-store.png' | asset_img_url: '135x' }}"
                  srcset="{{ 'download-app-store.png' | asset_img_url: '135x' }} 1x, {{ 'download-app-store.png' | asset_img_url: '270x' }} 2x"
                  loading="lazy"
                  alt="Download on the App Store"
                  width="135"
                  height="41">
              </a>
            {%- endif -%}
          </div>
        {%- endif -%}
      </div>
    </div>
  </div>
  {% if section.settings.show_payment_icons or section.settings.copyright != blank %}
    <hr class="my-0">
    <div>
      <div class="container py-3">
        <div class="d-flex flex-column flex-lg-row justify-content-lg-between">
          <div>
            {%- for block in section.blocks -%}
              {% liquid
                if forloop.last == true and forloop.length > 1
                  assign flag = true
                else
                  assign flag = false
                endif
              %}
              {% if block.settings.logo != blank %}
                <div class="d-inline-block mb-3{% if flag %} ms-3{% endif %}">
                  <a href="{{ block.settings.link }}" {% if block.settings.link contains 'https://' %}
                    target="_blank" rel="nofollow" {% endif %}>
                    <img class="h-100 logo-max-height{% if block.settings.link != shop.url %} logo-opacity{% endif %}" width="auto" height="auto" loading="lazy" src="{{ block.settings.logo | img_url: 'master' }}" alt="{{ block.settings.image.alt | escape }}" />
                  </a>
                </div>
              {% endif %}
            {% endfor %}
            {% if section.settings.copyright != blank %}
              <div class="fs-footnote text-footer {{ color_style }}">
                {{ section.settings.copyright }}
              </div>
            {% endif %}
          </div>
          {% if section.settings.show_payment_icons %}
            <ul class="d-flex justify-content-lg-between ps-0 text-md-start text-lg-center align-self-lg-end mt-3 mt-lg-0 flex-wrap" role="list">
              {%- for type in shop.enabled_payment_types -%}
                <li class="list-inline me-1 me-lg-0 ms-lg-1 ms-0 mb-1" width="auto" height="auto">
                  {{ type | payment_type_svg_tag: class: '' }}
                </li>
              {%- endfor -%}
            </ul>
          {% endif %}
        </div>
      </div>
    </div>
  {% endif %}
</div>
{% schema %}
  {
    "name": "Footer",
    "tag": "section",
    "class": "site-footer-section",
    "settings": [
      {
        "type":"header",
        "content":"EMAIL SIGNUP"
      },
      {
        "type":"paragraph",
        "content":"Subscribers added to your “accepted marketing”[ customer list](https://help.shopify.com/en/manual/customers/manage-customers)."
      },
      {
        "type": "checkbox",
        "id": "show_email_signup",
        "label": "Show email signup",
        "default": true
      },
      {
        "type": "text",
        "id": "heading",
        "label": "Heading",
        "default": "Sign up to our emails"
      },
      {
        "type": "richtext",
        "id": "description",
        "label": "Description"
      },
      {
        "type":"header",
        "content":"FOOTER"
      },
      {
        "type": "link_list",
        "id": "footer_menu",
        "label": "Footer menu",
        "default": "footer"
      },
      {
        "type": "select",
        "id": "background_color",
        "label": "Background color",
        "options": [
          {
            "value": "black",
            "label": "Black"
          },
          {
            "value": "white",
            "label": "White"
          }
        ],
        "default": "white"
      },
      {
        "type": "text",
        "id": "copyright",
        "label": "Copyright",
        "default": "Fastlane Sections Powered by Fastlane"
      },
      {
        "type":"header",
        "content":"APP DOWNLOAD"
      },
      {
        "type": "text",
        "id": "app_download_heading",
        "label": "App download heading",
        "default": "App Download"
      },
      {
        "type": "url",
        "id": "google_download_link",
        "label": "Google link"
      },
      {
        "type": "url",
        "id": "apple_store_link",
        "label": "Apple Store link"
      },
      {
        "type":"header",
        "content":"CONTACT INFORMATION"
      },
      {
        "type": "text",
        "id": "phone_number",
        "label": "Phone number"
      },
      {
        "type": "text",
        "id": "email_address",
        "label": "Email address"
      },
      {
        "type":"header",
        "content":"SOCIAL MEDIA ICONS"
      },
      {
        "type":"paragraph",
        "content":"To display your social media accounts, link them in your theme settings."
      },
      {
        "type": "text",
        "id": "social_media_heading",
        "label": "Social media heading",
        "default": "Follow Us"
      },
      {
        "type": "checkbox",
        "id": "show_social_media_icons",
        "label": "Show social media icons",
        "default": true
      },
      {
        "type":"header",
        "content":"PAYMENT METHODS"
      },
      {
        "type": "checkbox",
        "id": "show_payment_icons",
        "label": "Show payment icons",
        "default": true
      }
    ],
    "blocks": [
      {
        "type": "logo",
        "name": "Logo",
        "settings": [
          {
            "type": "image_picker",
            "id": "logo",
            "label": "Logo"
          },
          {
            "type": "url",
            "id": "link",
            "label": "Link"
          }
        ]
      }
    ]
  }
{% endschema %}
